<template>
<div class="main">
  <el-tabs type="border-card">
  <el-tab-pane label="停车场管理">
<!-- 查询 -->
<el-card id="search">
    <el-row>

    <el-input v-model="carpark.name" placeholder="名称" clearable></el-input>
    <el-input v-model="carpark.location" placeholder="地址" clearable></el-input>
    <el-input v-model="carpark.operator" placeholder="操作人员" clearable></el-input>
    <el-button type="primary" round icon="el-icon-search" @click="getList">查询</el-button>
    <el-button type="primary" round icon="el-icon-plus" @click="openUI(null)">新建</el-button>
</el-row>
</el-card>

<!-- 表格组件 -->
<el-card>
    <el-table
    :data="carparkList.slice((pageNow-1)*pageSize,pageNow*pageSize)"
    style="width: 100%">
<el-table-column
      label="序号">
      <template v-slot="{$index}">
        {{(pageNow-1)*10+$index+1}}
      </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称">
    </el-table-column>
    <el-table-column
      prop="location"
      label="地址">
    </el-table-column>
    <el-table-column
      prop="totalspaces"
      label="总车位数">
    </el-table-column>
    <el-table-column
      prop="availablespaces"
      label="可用车位数">
    </el-table-column>
    <el-table-column
      prop="operator"
      label="操作人员">
    </el-table-column>
    <el-table-column
      label="操作">
      <template slot-scope="scope">
                  <el-button type="primary" round @click="openUI(scope.row.carparkid)">
                    修改
                  </el-button>
                  <el-button type="danger" round @click="deleteCarpark(scope.row)">
                    删除
                  </el-button>

<el-popover
  placement="right"
  width="400"
  trigger="click">
  <el-table :data="scope.row.parkingspace">
    <el-table-column width="150" property="spacenumber" label="编号"></el-table-column>
    <el-table-column width="100" property="status" label="状态（是否可用）"></el-table-column>
  </el-table>
  <el-button slot="reference">车位详情</el-button>
</el-popover>

                  
                </template>
    </el-table-column>
  </el-table>

</el-card>


<!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      layout="total, prev, pager, next"
      :total="carparkList.length">
    </el-pagination>

<!-- 新增 -->
 
<el-dialog @close="clearForm" :title="title" :visible.sync="dialogFormVisible">
  <el-form :model="carparkForm">
    <el-form-item label="名称" :label-width="formLabelWidth">
      <el-input v-model="carparkForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="地址" :label-width="formLabelWidth">
      <el-input v-model="carparkForm.location" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="总车位数" :label-width="formLabelWidth">
      <el-input v-model="carparkForm.totalspaces" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="可用车位数" :label-width="formLabelWidth">
      <el-input v-model="carparkForm.availablespaces" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="操作人员" :label-width="formLabelWidth">
      <el-input v-model="carparkForm.operator" autocomplete="off"></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveCarpark(carparkForm)">确 定</el-button>
  </div>
</el-dialog>


  </el-tab-pane>


  <el-tab-pane label="车位管理">
车位管理
<!-- 查询 -->
<el-card id="search">
    <el-row>

    <el-input v-model="parkingSpace.carparkid" placeholder="隶属停车场编号" clearable></el-input>
    <el-input v-model="parkingSpace.spacenumber" placeholder="车位编号" clearable></el-input>
    <template>
  <el-select v-model="parkingSpace.status" filterable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
    <!-- <el-input v-model="parkingSpace.status" placeholder="状态（是否可用）" clearable></el-input> -->
    <el-button type="primary" round icon="el-icon-search" @click="getParkingSpaceList">查询</el-button>
    <el-button type="primary" round icon="el-icon-plus" @click="openParkingSpaceUI(null)">新建</el-button>
</el-row>
</el-card>

<!-- 表格组件 -->
<el-card>
    <el-table
    :data="parkingSpaceList.slice((pageNow-1)*pageSize,pageNow*pageSize)"
    style="width: 100%">
<el-table-column
      label="序号">
      <template v-slot="{$index}">
        {{(pageNow-1)*10+$index+1}}
      </template>
    </el-table-column>
    <el-table-column
      prop="carparkid"
      label="隶属停车场编号">
    </el-table-column>
    <el-table-column
      prop="spacenumber"
      label="车位编号">
    </el-table-column>
    <el-table-column
      prop="status"
      label="状态（是否可用）">
    </el-table-column>
    <el-table-column
      label="操作">
      <template slot-scope="scope">
                  <el-button type="primary" round @click="openParkingSpaceUI(scope.row.spaceid)">
                    修改
                  </el-button>
                  <el-button type="danger" round @click="deleteParkingSpace(scope.row)">
                    删除
                  </el-button>
                </template>
    </el-table-column>
  </el-table>

</el-card>
<!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      layout="total, prev, pager, next"
      :total="parkingSpaceList.length">
    </el-pagination>

<!-- 新增 -->
 
<el-dialog @close="clearParkingSpaceForm" :title="title" :visible.sync="dialogFormVisible">
  <el-form :model="parkingSpaceForm">
    <el-form-item label="隶属停车场编号" :label-width="formLabelWidth">
      <el-input v-model="parkingSpaceForm.carparkid" autocomplete="off"></el-input>
    </el-form-item>

    <!-- <el-select v-model="parkingSpaceForm.carparkid" slot="prepend" placeholder="隶属停车场编号">
      

      <el-option
      v-for="item in carparkId"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>

    </el-select> -->

    <el-form-item label="车位编号" :label-width="formLabelWidth">
      <el-input v-model="parkingSpaceForm.spacenumber" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="状态（是否可用）" :label-width="formLabelWidth">
<el-select v-model="parkingSpaceForm.status" filterable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</el-form-item>
    <!-- <el-form-item label="状态（是否可用）" :label-width="formLabelWidth">
      <el-input v-model="parkingSpaceForm.status" autocomplete="off"></el-input>
    </el-form-item>
     -->
  </el-form>

  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveParkingSpace(parkingSpaceForm)">确 定</el-button>
  </div>
</el-dialog>

  </el-tab-pane>


 
</el-tabs>





</div>
</template>

<script>
import {getList,addCarpark,getCarparkInfoById,updateCarpark,deleteCarpark,
   getParkingSpaceList,addParkingSpace,updateParkingSpace,getParkingSpaceInfoById,deleteParkingSpace
  //  ,getCarparkId
  } from "@/api/carparkinfo/index"


export default {
    data(){
        return {
          // 车位
          parkingSpace:{},
          parkingSpaceForm:{},
          parkingSpaceList:[],

          // 停车场变量
          // 表单项前面空白距离
          formLabelWidth:'130px',
          carparkForm:{},
          dialogFormVisible:false,
          title:'',
          total:0,
          pageNow: 1,
          pageSize:10,
          carpark:{},
          carparkList:[],

          options: [{
          value: 'Occupied',
          label: 'Occupied'
        }, {
          value: 'Vacant',
          label: 'Vacant'
        },{
          value: '',
          label: ''
        }
      ],
      // carparkId:[],
          
         }

        

    },
    methods:{
    

      // getCarparkId(){
      //   getCarparkId().then(response=>{
      //     console.log("rrrrrrrrrrrrr",response);
      //     this.carparkId=response;
      //   })
      // },
      deleteParkingSpace(parkingSpace){
        deleteParkingSpace(parkingSpace.spaceid).then(response => {
          
                if(response == "success"){
                    this.$notify({
                        title: '删除成功',
                        message: '数据成功删除',
                        type: 'success'
                    });
                    this.getParkingSpaceList();
                }else{
                    this.$notify.error({
                        title: '删除失败',
                        message: '数据删除失败',
                    });
                }
            
            });
        },

      saveParkingSpace(parkingSpaceForm){
        if(parkingSpaceForm.spaceid == null && parkingSpaceForm.spaceid == undefined){
          addParkingSpace(this.parkingSpaceForm).then(response => {
            console.log(response);
            if(response == "success"){
                        this.$notify({
                            title: '添加成功',
                            message: '数据成功上传',
                            type: 'success'
                        });
                    }else{
                        this.$notify.error({
                            title: '添加失败',
                            message: '数据上传失败',
                        });
                    }
                    this.dialogFormVisible=false;
            this.showDialog = false;
            this.getParkingSpaceList();
          });
        }else{
          updateParkingSpace(this.parkingSpaceForm).then(response => {
            console.log(response);
            if(response == "success"){
                        this.$notify({
                            title: '修改成功',
                            message: '数据成功上传',
                            type: 'success'
                        });
                        
                    }else{
                        this.$notify.error({
                            title: '修改失败',
                            message: '数据上传失败',
                        });
                    }
                    this.dialogFormVisible=false;
            this.showDialog = false;
            this.getParkingSpaceList();
            
        });
      
        }
      },
      clearParkingSpaceForm(){
        this.parkingSpaceForm={};
      },
      openParkingSpaceUI(id){
        if(id == null){
          console.log("form值",this.parkingSpaceForm)
          this.title='新增车位信息';
        }else{
          this.title='修改车位信息';
          getParkingSpaceInfoById(id).then(response=>{
          console.log("qqqqqqqqqqqqqqqqq",response)
          this.parkingSpaceForm=response;
        })
        }
        this.dialogFormVisible=true;
      },
      getParkingSpaceList(){
        getParkingSpaceList(this.parkingSpace).then(response => {
            console.log("this.parkingSpace---------------",this.parkingSpace)
            this.parkingSpaceList = response;
            console.log("fanhuiiiiiiiiii",response);
        });
        },

      // 停车场管理方法


      deleteCarpark(carpark){
        deleteCarpark(carpark.carparkid).then(response => {
          
                if(response == "success"){
                    this.$notify({
                        title: '删除成功',
                        message: '数据成功删除',
                        type: 'success'
                    });
                    this.showDialog = false;
                    this.getList();
                }else{
                    this.$notify.error({
                        title: '删除失败',
                        message: '数据删除失败',
                    });
                }
            });
        },
      
      saveCarpark(carparkForm){
        if(carparkForm.carparkid == null && carparkForm.carparkid == undefined){
        addCarpark(this.carparkForm).then(response => {
            console.log(response);
            if(response == "success"){
                        this.$notify({
                            title: '添加成功',
                            message: '数据成功上传',
                            type: 'success'
                        });
                    }else{
                        this.$notify.error({
                            title: '添加失败',
                            message: '数据上传失败',
                        });
                    }
                    this.showDialog = false;
            this.dialogFormVisible=false
            this.getList();
            // this.getCarparkId();
            
        });}else{
          updateCarpark(this.carparkForm).then(response => {
            console.log(response);
            if(response == "success"){
                        this.$notify({
                            title: '修改成功',
                            message: '数据成功上传',
                            type: 'success'
                        });
                    }else{
                        this.$notify.error({
                            title: '修改失败',
                            message: '数据上传失败',
                        });
                    }
                    this.showDialog = false;
            this.dialogFormVisible=false
            this.getList();
        });
        }
      },
      clearForm(){
        this.carparkForm={};
      },
      openUI(id){
        if(id == null){
          console.log("form值",this.carparkForm)
          
          this.title='新增停车场信息';
        }else{
          this.title='修改停车场信息';
          getCarparkInfoById(id).then(response=>{
          console.log("qqqqqqqqqqqqqqqqq",response)
          this.carparkForm=response;
        })
        }
        this.dialogFormVisible=true;
      },

        handleCurrentChange(pageNow){
          this.pageNow=pageNow;
        },
        getList(){
          getList(this.carpark).then(response => {
            console.log("this.carpark---------------",response)
            this.carparkList = response;
        });
        }

    },
    created(){
        this.getList();
        this.getParkingSpaceList();
        // this.getCarparkId();
    }
}


</script>

<style>
.main {
    /* background-color: #fcfcfc; */
    color: #333;
    /* width: 100%; */
    padding: 20px;
    padding-top: 100px;
    /* 给顶栏高度留出空间 */
    margin-left: 200px;
    /* 给aside留出空间，200px为aside宽度 */
}

#search .el-input{
    width: 200px;
    margin:10px;
}

.el-card{
    margin-bottom: 10px;
}

.el-table-column{
    width: 300px;
}

.el-dialog .el-input{
  width: 80%;
}

</style>